<template>
  <div class="home-container">
    <el-row style="height: 100%">
      <el-col :span="8" class="home-aside-container">
        <div class="aside-header">
          <el-button type="primary" round plain @click="intoAddTransaction()">
            <el-icon>
              <CirclePlusFilled />
            </el-icon>
            &nbsp;添加事务
          </el-button>
        </div>
        <div class="aisde-main">
          <div class="aside-main-header">
            <span>本周事务</span>
            <div style="display: flex; align-items: center">
              <el-popover placement="right" :width="400" :visible="popOverVisible">
                <p
                  style="
                    font-size: 25px;
                    color: var(--el-color-warning);
                    display: inline-block;
                  "
                >
                  <el-icon>
                    <List />
                  </el-icon>
                  本周全部事务
                </p>
                <p style="cursor: pointer; display: inline-block; margin-left: 40%">
                  <el-icon @click="popOverVisible = false">
                    <CloseBold />
                  </el-icon>
                </p>
                <div style="margin-left: 28%">
                  <el-button
                    type="primary"
                    plain
                    style="margin-left: 16px"
                    @click="getWeekListTask3()"
                  >
                    全部
                  </el-button>
                  <el-button
                    type="success"
                    style="margin-left: 16px"
                    @click="getWeekListTask3(1)"
                  >
                    已完成
                  </el-button>
                  <el-button
                    type="info"
                    style="margin-left: 16px"
                    @click="getWeekListTask3(0)"
                  >
                    未完成
                  </el-button>
                </div>
                <template #reference>
                  <el-button  class="check-all" round plain
                    type="primary"
                    style="cursor: pointer;height: 25px;"
                    @click="popOverVisible = true"
                  >
                    查看全部
                  </el-button>
                </template>
                <el-scrollbar height="400px">
                  <div class="aside-main-content">
                    <div
                      class="aside-affair"
                      style="background-color: burlywood"
                      v-for="(task, index) in weekTaskList3?.slice(0, taskWeekLength)"
                      :key="index"
                    >
                      <el-dialog v-model="visible" :show-close="false" width="500">
                        <template #header="{ close, titleId, titleClass }">
                          <div class="my-header">
                            <h4 :id="titleId" :class="titleClass">事务内容!</h4>
                            <el-button type="danger" @click="close">
                              <el-icon class="el-icon--left">
                                <CircleCloseFilled />
                              </el-icon>
                              Close
                            </el-button>
                          </div>
                        </template>
                        {{ task.content }}
                      </el-dialog>

                      <div class="aside-affair-content">
                        <div style="font-size: 18px">{{ task.dayOfWeek }}</div>
                        <div style="display: inline-block">
                          <div style="width: 110px; display: inline-block">
                            {{ task.taskTitle }}
                          </div>
                          <div
                            style="width: 60px; display: inline-block; margin-left: 5px"
                          >
                            {{ formatTime(task.time) }}
                          </div>
                          <div
                            style="
                              width: 60px;
                              font-size: 16px;
                              display: inline-block;
                              margin-left: 5px;
                            "
                          >
                            {{ statusFun(task.completionStatus) }}
                          </div>
                          <div style="display: inline-block; margin-left: 7px">
                            <el-icon @click="visible = true">
                              <ChatDotRound />
                            </el-icon>
                          </div>
                          <div
                            style="width: 20px; display: inline-block; margin-left: 7px"
                          >
                            <el-icon
                              @click="
                                (changeTaskDialogVisible = true),
                                  (changeTaskForm.id = task.id)
                              "
                            >
                              <Edit />
                            </el-icon>
                          </div>
                          <div
                            style="width: 20px; display: inline-block; margin-left: 7px"
                          >
                            <el-icon @click="deleteTodayTask(task.id)">
                              <Delete />
                            </el-icon>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-scrollbar>
              </el-popover>
            </div>
          </div>
          <div class="aside-main-content">
            <div
              style="background-color: burlywood"
              class="aside-affair"
              v-for="(task, index) in weekTaskList?.slice(0, 2)"
              :key="index"
            >
              <el-dialog v-model="visible" :show-close="false" width="500">
                <template #header="{ close, titleId, titleClass }">
                  <div class="my-header">
                    <h4 :id="titleId" :class="titleClass">事务内容!</h4>
                    <el-button type="danger" @click="close">
                      <el-icon class="el-icon--left">
                        <CircleCloseFilled />
                      </el-icon>
                      Close
                    </el-button>
                  </div>
                </template>
                {{ task.content }}
              </el-dialog>

              <div class="aside-affair-content">
                <div style="font-size: 18px">{{ task.dayOfWeek }}</div>
                <div style="display: inline-block">
                  <div style="width: 140px; display: inline-block">
                    {{ task.taskTitle }}
                  </div>
                  <div style="width: 60px; display: inline-block; margin-left: 5px">
                    {{ formatTime(task.time) }}
                  </div>
                  <div
                    style="
                      width: 50px;
                      font-size: 16px;
                      display: inline-block;
                      margin-left: 5px;
                    "
                  >
                    {{ statusFun(task.completionStatus) }}
                  </div>
                  <div style="display: inline-block; margin-left: 10px">
                    <el-icon @click="visible = true"><ChatDotRound /></el-icon>
                  </div>
                  <div style="width: 20px; display: inline-block; margin-left: 5px">
                    <el-icon
                      @click="
                        (changeTaskDialogVisible = true), (changeTaskForm.id = task.id)
                      "
                    >
                      <Edit />
                    </el-icon>
                  </div>
                  <div style="width: 20px; display: inline-block; margin-left: 5px">
                    <el-icon @click="deleteTodayTask(task.id)">
                      <Delete />
                    </el-icon>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="aside-main-footer" style="margin-top: 20px">
          <el-calendar ref="calendar" />
        </div>
      </el-col>
      <el-col :span="16" class="home-main-container">
        <el-row>
          <el-col :span="14">
            <div style="display: flex; flex-direction: column; height: 100vh">
              <el-row style="flex-grow: 9">
                <div class="home-main-left">
                  <div class="main-left-header">
                    <div class="main-left-title">
                      <h1 style="font-size: 26px">今日事务</h1>
                      <el-text type="primary" style="font-size: 35px">
                        {{ getWeekday() }}
                      </el-text>
                    </div>

                    <el-button class="check-all"
                      type="primary"
                      :icon="Plus"
                      circle
                      style="margin-left: 12px"
                      @click="intoAddTransaction()"
                    />
                  </div>
                  <!-- 今日事务模块 -->
                  <el-popover
                    placement="right"
                    :width="400"
                    :visible="popOverVisibleToday"
                  >
                    <template #reference>
                      <el-button class="check-all" round plain
                        type="primary"
                        style="cursor: pointer; margin-left: 80%;height: 25px"
                        @click="popOverVisibleToday = true"
                      >
                        查看全部
                      </el-button>
                    </template>
                    <p
                      style="
                        font-size: 25px;
                        color: var(--el-color-warning);
                        display: inline-block;
                      "
                    >
                      <el-icon>
                        <List />
                      </el-icon>
                      全部事务
                    </p>
                    <p style="cursor: pointer; display: inline-block; margin-left: 50%">
                      <el-icon @click="popOverVisibleToday = false">
                        <CloseBold />
                      </el-icon>
                    </p>
                    <el-scrollbar height="400px">
                      <div class="aside-main-content">
                        <div
                          class="aside-affair"
                          style="background-color: burlywood"
                          v-for="(task, index) in todayTaskList?.slice(0, taskLength)"
                          :key="index"
                        >
                          <el-dialog v-model="visible" :show-close="false" width="500">
                            <template #header="{ close, titleId, titleClass }">
                              <div class="my-header">
                                <h4 :id="titleId" :class="titleClass">事务内容!</h4>
                                <el-button type="danger" @click="close">
                                  <el-icon class="el-icon--left">
                                    <CircleCloseFilled />
                                  </el-icon>
                                  Close
                                </el-button>
                              </div>
                            </template>
                            {{ task.content }}
                          </el-dialog>

                          <div class="aside-affair-content">
                            <div style="display: inline-block">
                              <div style="width: 130px; display: inline-block">
                                {{ task.taskTitle }}
                              </div>
                              <div
                                style="
                                  width: 50px;
                                  display: inline-block;
                                  margin-left: 5px;
                                "
                              >
                                {{ formatTime(task.time) }}
                              </div>

                              <div
                                style="
                                  width: 60px;
                                  font-size: 16px;
                                  display: inline-block;
                                  margin-left: 5px;
                                  cursor: pointer;
                                "
                                @click="swapStatus(task.id, task.completionStatus)"
                              >
                                {{ statusFun(task.completionStatus) }}
                              </div>

                              <div style="display: inline-block; margin-left: 5px">
                                <el-icon @click="visible = true">
                                  <ChatDotRound />
                                </el-icon>
                              </div>
                              <div
                                style="
                                  width: 20px;
                                  display: inline-block;
                                  margin-left: 10px;
                                "
                              >
                                <el-icon
                                  @click="
                                    (changeTaskDialogVisible = true),
                                      (changeTaskForm.id = task.id)
                                  "
                                >
                                  <Edit />
                                </el-icon>
                              </div>
                              <div
                                style="
                                  width: 20px;
                                  display: inline-block;
                                  margin-left: 10px;
                                "
                              >
                                <el-icon @click="deleteTodayTask(task.id)">
                                  <Delete />
                                </el-icon>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </el-scrollbar>
                  </el-popover>

                  <div class="aside-main-content">
                    <div
                      style="background-color: burlywood; height: 80px"
                      class="aside-affair"
                      v-for="(task, index) in todayTaskList?.slice(0, 4)"
                      :key="index"
                    >
                      <el-dialog v-model="visible" :show-close="false" width="500">
                        <template #header="{ close, titleId, titleClass }">
                          <div class="my-header">
                            <h4 :id="titleId" :class="titleClass">事务内容!</h4>
                            <el-button type="danger" @click="close">
                              <el-icon class="el-icon--left">
                                <CircleCloseFilled />
                              </el-icon>
                              Close
                            </el-button>
                          </div>
                        </template>
                        {{ task.content }}
                      </el-dialog>

                      <div class="aside-affair-content" style="margin-top: 15px">
                        <!-- <div style="font-size: 18px">{{ task.dayOfWeek }}</div> -->
                        <div style="display: inline-block">
                          <div
                            style="width: 220px; display: inline-block; font-size: 18px"
                          >
                            {{ task.taskTitle }}
                          </div>
                          <div
                            style="
                              width: 60px;
                              font-size: 18px;
                              display: inline-block;
                              margin-left: 10px;
                            "
                          >
                            {{ task.time.slice(11,16) }}
<!--                            {{ formatTime(task.time) }}-->
                          </div>

                          <div
                            style="
                              width: 60px;
                              font-size: 16px;
                              display: inline-block;
                              margin-left: 5px;
                              cursor: pointer;
                            "
                            @click="swapStatus(task.id, task.completionStatus)"
                          >
                            {{ statusFun(task.completionStatus) }}
                          </div>
                          <div
                            style="
                              display: inline-block;
                              font-size: 18px;
                              margin-left: 10px;
                            "
                          >
                            <el-icon @click="visible = true">
                              <ChatDotRound />
                            </el-icon>
                          </div>
                          <div
                            style="
                              width: 20px;
                              font-size: 18px;
                              display: inline-block;
                              margin-left: 7px;
                              font-size: 18px;
                            "
                          >
                            <el-icon
                              @click="
                                (changeTaskDialogVisible = true),
                                  (changeTaskForm.id = task.id)
                              "
                            >
                              <Edit />
                            </el-icon>
                          </div>
                          <div
                            style="width: 20px; display: inline-block; margin-left: 7px"
                          >
                            <el-icon @click="deleteTodayTask(task.id)">
                              <Delete />
                            </el-icon>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-row>

              <el-row style="flex-grow: 1" @click="memo()">
                <div class="main-right-item1"
                     style="width: 100%;height: 68%;background-color: var(--el-color-warning-light-3);">
                  <p
                    style="cursor: pointer; font-size: 30px; text-align: center;"

                  >
                    备忘录
                  </p>
                </div>
              </el-row>
            </div>
          </el-col>

          <el-col :span="10">
            <div class="home-main-right">
              <div class="home-main-header">
                <div>
                  <p style="font-size: 16px; margin-bottom: 4px">
                    {{ userStore.userInfo.nickname }}
                  </p>
                  <el-text
                    type="primary"
                    style="font-size: 13px; cursor: pointer"
                    @click="intoSetting()"
                  >
                    我的设置
                  </el-text>
                </div>
                <el-dropdown>
                  <div style="display: flex; align-items: center">
                    <el-avatar
                      style="margin-left: 12px; margin-right: 4px; cursor: pointer"
                      :size="54"
                      :src="userStore.userInfo.avatar"
                      @click="intoSetting()"
                    ></el-avatar>
                    <el-icon><arrow-down /></el-icon>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item
                        :icon="CircleCloseFilled"
                        @click="userStore.userLogout()"
                      >
                        退出登录
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <div class="main-right-time" @click="weatherDialogVisible = true">
                <p style="font-size: 22px">{{ getCurrentTime() }}</p>
                <p style="font-size: 20px; margin-top: 8px">{{ weather }}</p>
              </div>
              <div class="main-right-item" style="max-height: 265px">
                <p style="font-size: 18px; margin-bottom: 18px">今日进度</p>
                <el-progress
                  type="dashboard"
                  :percentage="percentage"
                  :color="colors"
                  style="margin-bottom: 20px"
                />
                <p style="font-size: 18px">
                  {{ todayPropgressMessage }}
                </p>
              </div>
              <div class="main-right-footer" style="max-height: 160x">
                <p style="font-size: 20px; margin-bottom: 12px">查看全部事务</p>
                <div style="margin-top: 8px">
                  <img src="../../assets/clock.png" style="height: 100px; width: 120px" />
                  <el-button class="check-all"
                    type="primary"
                    :icon="Right"
                    style="width: 32px; margin-left: 24px; margin-top: -48px"
                    @click="allWork()"
                  />
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
  <el-dialog
    style="border-radius: 30px; min-height: 40%; padding: 20px"
    v-model="changeTaskDialogVisible"
    width="40%"
    draggable
  >
    <div style="font-size: 23px; color: #f4b860; margin-left: 20px">修改事务</div>
    <div style="display: inline-block; width: 80%; height: 80%">
      <div class="item">
        <div class="label">提醒时间</div>
        <el-date-picker
          v-model="changeTaskForm.time"
          type="datetime"
          placeholder="选择修改的时间"
          :default-time="defaultTime"
        />
      </div>
      <div class="item">
        <div class="label">提醒级别</div>
        <div
          class="input-box"
          style="background-color: white; height: 70px; width: 240px"
        >
          <el-radio-group
            v-model="changeTaskForm.reminderLevel"
            style="margin: 0 auto; margin-top: 20px"
          >
            <el-radio label="1" size="small">一般</el-radio>
            <el-radio label="2" size="small">重要</el-radio>
            <el-radio label="3" size="small">关键</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>

    <div style="text-align: center; margin-top: 10%">
      <button
        style="
          height: 50px;
          width: 120px;
          border: 0;
          background-color: #f8d57e;
          color: white;
          border-radius: 50px;
          font-size: 16px;
          font-weight: lighter;
          box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 设置盒子阴影效果 */
        "
        @click="changeTask"
      >
        确认修改
      </button>
    </div>
  </el-dialog>
<!--  background: linear-gradient(to bottom, #6dacec, #FFFFFF);-->
  <el-dialog v-model="weatherDialogVisible" title="" width="1100" align-center style="border-radius: 30px;background: linear-gradient(to bottom, #8ebae8, #FFFFFF); /* 定义线性渐变背景 */">
    <template #footer>
      <div style="text-align: left;padding:0px 40px 0px 40px;">
        <div style="height: 120px;font-weight: lighter;">
          <span style="font-size: 72px;font-weight: bold;"> {{ currentWeather.temp }}°</span>
          <div style="display: inline-block;vertical-align: top;margin-left: 60px;font-size: 14px;">
            <div style="margin-top: 0px;margin-bottom: 20px;display: flex; align-items: center;">
              <div style="display: inline-block;">{{ currentWeather.text }}</div>
              <img v-if="currentWeather.text.includes('雨')" src="@/assets/icons/rain.png" style="margin-left: 20px;width:40px;height:40px;">
              <img v-else-if="currentWeather.text.includes('云')" src="@/assets/icons/cloud.png" style="margin-left: 20px;width:40px;height:40px;">
              <img v-else-if="currentWeather.text.includes('阴')" src="@/assets/icons/dark.png" style="margin-left: 20px;width:40px;height:40px;">
              <img v-else src="@/assets/icons/sunny.png" style="margin-left: 20px;width:40px;height:40px;">
            </div>
            <div style="color: #666666;">
              <span style="margin-right: 25px;">{{ currentWeather.windDir }}: {{ currentWeather.windScale }}级</span>
              <span style="margin-right: 25px;">风速: {{ currentWeather.windSpeed }}km/h</span>
              <span style="margin-right: 25px;">相对湿度: {{ currentWeather.humidity }}%</span>
              <span style="margin-right: 25px;">大气压强: {{ currentWeather.pressure }}hPa</span>
            </div>
          </div>
        </div>
        <div style="height:180px;">
          <span style="font-size: 14px;">
            24小时预报
          </span>
          <el-scrollbar>
            <div style=" display: flex;margin-top: 30px;">
              <div v-for="futureWeather in futureWeathers" style="margin-right: 40px;flex-direction: column; align-items: center;display: flex;">
                <img v-if="futureWeather.text.includes('雨')" src="@/assets/icons/rain.png" style="width:40px;height:40px;">
                <img v-else-if="futureWeather.text.includes('云')" src="@/assets/icons/cloud.png" style="width:40px;height:40px;">
                <img v-else-if="futureWeather.text.includes('阴')" src="@/assets/icons/dark.png" style="width:40px;height:40px;">
                <img v-else src="@/assets/icons/sunny.png" style="width:40px;height:40px;">
                <div style="margin-top: 20px;font-size: 14px;color: #666666;">{{ futureWeather.temp }}°</div>
                <div style="margin-top: 10px;font-size: 14px;color: #666666;">{{ futureWeather.fxTime.slice(11,16) }}</div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div style="height:180px;">
          <span style="font-size: 14px;">
            未来7天预报
          </span>
          <el-scrollbar>
            <div style=" display: flex;margin-top: 30px;">
              <div v-for="futureDay in futureDays" style="margin-right: 75px;flex-direction: column; align-items: center;display: flex;">
                <img v-if="futureDay.textDay.includes('雨')" src="@/assets/icons/rain.png" style="width:40px;height:40px;">
                <img v-else-if="futureDay.textDay.includes('云')" src="@/assets/icons/cloud.png" style="width:40px;height:40px;">
                <img v-else-if="futureDay.textDay.includes('阴')" src="@/assets/icons/dark.png" style="width:40px;height:40px;">
                <img v-else src="@/assets/icons/sunny.png" style="width:40px;height:40px;">
                <div style="margin-top: 20px;font-size: 14px;color: #666666;">{{ futureDay.tempMin }}° ~ {{ futureDay.tempMax }}°</div>
                <div style="margin-top: 10px;font-size: 14px;color: #666666;">{{ futureDay.fxDate.slice(5,10) }}</div>
              </div>

            </div>
          </el-scrollbar>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { Plus, Right, CircleCloseFilled } from "@element-plus/icons-vue";
import { getWeekday, getCurrentTime } from "@/utils/time";
import { useRouter } from "vue-router";
import useUserStore from "@/store/modules/user";
import { ElMessage } from "element-plus";
import { Delete } from "@element-plus/icons-vue";

import {
  getTodayTask,
  deleteTask,
  getWeekAllInfo,
  editTodayTask,
  getTodayProgress,
  changeStatus,
} from "@/api/task";
import { AllTaskList, EditTaskParams } from "@/api/task/type";
import { ElMessageBox } from "element-plus";

const popOverVisible = ref(false);
const popOverVisibleToday = ref(false);
const changeTaskDialogVisible = ref<boolean>(false);
const weatherDialogVisible = ref<boolean>(false);
const visible = ref(false);

const router = useRouter();
const weather = ref("");
let currentWeather = reactive({
  temp: 0,
  text: '',
  windDir: '',
  windScale: 0,
  windSpeed: 0,
  pressure: 0,
  humidity: 0
})
let futureWeathers = reactive(Array.from({ length: 24 }, () => ({ temp: 0, fxTime: '',text:'' })));
let futureDays = reactive(Array.from({ length: 7 }, () => ({ tempMin: 0, fxDate: '',tempMax: 0,textDay: '' })));
const userStore = useUserStore();
onMounted(async () => {
  await getCurrentWeather(),  await getFutureWeather(), await getFutureDays(), await getTodayListTask(), await getWeekListTask();
  await getWeekListTask3();
  await getTodayTaskProgress();
});

const intoAddTransaction = () => {
  router.push("/add-transaction");
};
const intoAddWeekPlan = () => {
  router.push("/add-week-plan");
};
const intoSetting = () => {
  router.push("/setting");
};

const memo = () => {
  router.push("/today-work");
};

const allWork = () => {
  router.push("/all-work");
};

const ty = ref(0);

const percentage = ref(90);

const colors = [
  { color: "#f56c6c", percentage: 20 },
  { color: "#e6a23c", percentage: 40 },
  { color: "#5cb87a", percentage: 60 },
  { color: "#1989fa", percentage: 80 },
  { color: "#6f7ad3", percentage: 100 },
];
const showBox = ref(false);

const getCurrentWeather = () => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(async (position) => {
      try {
        const response = await fetch(
          "https://devapi.qweather.com/v7/weather/now?location=" +
            position.coords.longitude.toFixed(2) +
            "," +
            position.coords.latitude.toFixed(2) +
            "&key=955811951b604bd7b406a2c08a70755b"
        );
        const data = await response.json();
        console.log('天气数据',data)
        currentWeather = data.now
        console.log('今日天气',currentWeather)
        weather.value = data.now.text + " " + data.now.windDir;
      } catch (error) {
        ElMessage.error((error as Error).message);
      }
    });
  } else {
    ElMessage.error("未授予地理定位权限.");
  }
};
const getFutureWeather = () => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(async (position) => {
      try {
        const response = await fetch(
            "https://devapi.qweather.com/v7/weather/24h?location=" +
            position.coords.longitude.toFixed(2) +
            "," +
            position.coords.latitude.toFixed(2) +
            "&key=955811951b604bd7b406a2c08a70755b"
        );
        const data = await response.json();
        futureWeathers = data.hourly
        console.log('未来24小时天气数据',futureWeathers)
      } catch (error) {
        ElMessage.error((error as Error).message);
      }
    });
  } else {
    ElMessage.error("未授予地理定位权限.");
  }
}
const getFutureDays = () => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(async (position) => {
      try {
        const response = await fetch(
            "https://devapi.qweather.com/v7/weather/7d?location=" +
            position.coords.longitude.toFixed(2) +
            "," +
            position.coords.latitude.toFixed(2) +
            "&key=955811951b604bd7b406a2c08a70755b"
        );
        const data = await response.json();
        futureDays = data.daily
        console.log('未来7天天气数据',futureDays)
      } catch (error) {
        ElMessage.error((error as Error).message);
      }
    });
  } else {
    ElMessage.error("未授予地理定位权限.");
  }
}
const showAll = async () => {
  showBox.value = true;
};
const closeAll = async () => {
  showBox.value = false;
};

/**
 * 状态完成转换
 */
let completionStatus1 = 0; // 初始化 completionStatus1

const swapStatus = async (id: number, status: number) => {
  console.log("status", status);
  // 切换 completionStatus1 的值
  if (status >= 1) {
    console.log("status1", status);
    completionStatus1 = 0; // 注意这里使用赋值操作符 "=" 而不是比较操作符 "=="
  } else {
    completionStatus1 = 1; // 同样地，这里使用赋值操作符 "=" 而不是比较操作符 "=="
  }
  console.log(111);
  // 假设你需要将 completionStatus 传递给某个函数
  try {
    const { message } = await changeStatus({
      taskId: id,
      completionStatus: completionStatus1,
    });
    ElMessage({
      showClose: true,
      message: message,
      type: "success",
    });
  } catch (e) {
    Promise.reject(e);
  }
  getTodayListTask();
};

/**
 * 获取今日进度
 */
const todayPropgressMessage = ref<string>("");
const getTodayTaskProgress = async () => {
  try {
    const res = await getTodayProgress();
    percentage.value = res.data;
    todayPropgressMessage.value = res.message;
    console.log("进度", percentage.value);
  } catch (e) {
    Promise.reject(e);
  }
};
/**
 * 获取今日全部事务
 */
const todayTaskList = ref<AllTaskList[]>();

const getTodayListTask = async () => {
  try {
    const { data } = await getTodayTask();
    todayTaskList.value = data;
    const taskLength = data?.length;
    console.log("长度", taskLength);
    console.log("今日事务", todayTaskList);
  } catch (e) {
    Promise.reject(e);
  }
};

/**
 * 格式化时间函数
 */
const formatTime = (time) => {
  const date = new Date(time);
  const hours = date.getUTCHours(); // 获取小时（UTC时间）
  const minutes = date.getUTCMinutes(); // 获取分钟（UTC时间）
  return `${hours}:${minutes}`;
};

// 截断文本函数
const truncateText = (text) => {
  return text.length > 5 ? text.slice(0, 5) + "..." : text;
};

/**
 * 删除事务弹框
 */

const deleteTodayTask = async (id: number) => {
  console.log("删除事务的id", id);
  ElMessageBox.confirm("你确认要删除事务信息吗?", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      //调用接口
      console.log("212");
      let result = await deleteTask(id);
      console.log("返回的数据为", result);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      //刷新列表
      getTodayListTask();
      getWeekListTask();
      getWeekListTask3();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "用户取消了删除",
      });
    });
};

/**
 * 完成状态转换
 */
const statusFun = (completionStatusPromise: number) => {
  const completionStatus = completionStatusPromise;
  if (completionStatus === 0) {
    return "未完成";
  } else if (completionStatus >= 1) {
    return "已完成";
  } else {
    return "未知状态";
  }
};

/**
 * 获取本周全部事务
 */

const weekTaskList = ref<AllTaskList[]>();
const weekTaskList3 = ref<AllTaskList[]>();

const getWeekListTask = async (status?: number) => {
  try {
    const { data } = await getWeekAllInfo(status);
    weekTaskList.value = data;
    const taskWeekLength = data?.length;
    console.log("长度", taskWeekLength);
    console.log("本周全部事务", weekTaskList);
  } catch (e) {
    Promise.reject(e);
  }
};

/**
 * 三种完成状态调用函数
 */
const getWeekListTask3 = async (status?: number) => {
  try {
    const { data } = await getWeekAllInfo(status);
    weekTaskList3.value = data;
    const taskWeekLength = data?.length;
    console.log("长度", taskWeekLength);
    console.log("本周全部事务", weekTaskList3);
  } catch (e) {
    Promise.reject(e);
  }
};

/**
 * 修改时间
 */
const changeTaskForm = reactive<EditTaskParams>({
  id: 0,
  time: "",
  reminderLevel: 0,
});
const changeTask = async () => {
  try {
    const { message } = await editTodayTask(changeTaskForm);
    ElMessage({
      showClose: true,
      message: message,
      type: "success",
    });
  } catch (e) {
    Promise.reject(e);
  }
  await getWeekListTask();
  changeTaskDialogVisible.value = false;
};
</script>
<style scoped lang="scss">
.home-container {
  height: 100vh;

  .home-aside-container {
    height: 100%;
    padding: 0 4vw;
    //background-color: #f8f8f8;

    .aside-header {
      height: 12vh;
      display: flex;
      align-items: center;
      justify-content: left;
    }

    .aisde-main {
      max-height: 29vh;

      .aside-main-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .aside-main-content {
        padding: 22px 0;

        .aside-affair {
          border-radius: 12px;
          margin-bottom: 12px;
          padding: 14px 22px;
          background-color: var(--el-menu-bg-color);
          display: flex;

          .aside-affair-icon {
            height: 38px;
            width: 38px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--el-color-warning);
          }

          .aside-affair-content {
            padding-left: 1px;
          }
        }

        .aside-affair-add {
          border-radius: 12px;
          padding: 14px 22px;
          background-color: var(--el-menu-bg-color);
          display: flex;
          align-items: center;
          cursor: pointer;

          .aside-affair-icon {
            height: 38px;
            width: 38px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--el-color-warning);
          }
        }
      }
    }
  }

  .home-main-container {
    height: 100%;
    //background-color: var(--el-menu-bg-color);

    .home-main-left {
      padding: 48px 50px 0;

      .main-left-header {
        display: flex;
        align-items: center;

        .main-left-title {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 58px;
        }
      }

      .main-left-content {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        margin-top: 12px;
        border: 2px solid #eebe77;
        padding: 28px 16px;
        border-radius: 8px;
        background-color: #ededed;

        .one-content-title {
          display: flex;
          justify-content: space-between;
          padding-bottom: 8px;

          .one-content-title-left {
            display: flex;
            align-items: center;
          }
        }

        .one-content {
          margin-left: 22px;
        }
      }

      .main-left-tip {
        border-radius: 8px;
        margin-top: 12px;
        padding: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--el-color-warning-light-3);
        cursor: pointer;

        .main-left-tip-left {
          display: flex;
          align-items: center;
        }
      }
    }

    .home-main-right {
      padding: 42px 50px 0;

      .home-main-header {
        display: flex;
        justify-content: right;
        align-items: center;
      }

      .main-right-time {
        min-height: 110px;
        margin-bottom: 25px;
        padding: 4vh 0px;
        border-radius: 12px;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #ededed;
      }

      .main-right-item {
        padding: 5vh 0;
        border-radius: 12px;

        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #ededed;
      }

      .main-right-footer {
        padding: 4vh;
        margin-top: 20px;
        background-color: #ededed;
      }
    }
  }
}
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
}

.main-left-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 12px;
  padding: 28px 16px;
  border-radius: 8px;
  background-color: #ededed;

  .one-content-title {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;

    .one-content-title-left {
      display: flex;
      align-items: center;
    }
  }

  .one-content {
    margin-left: 22px;
  }
}

.icon-all {
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  background-color: var(--el-color-warning);
  color: #ffffff;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
</style>

<style>
.el-calendar-table .el-calendar-day {
  height: 48px;
}

.aside-main-content {
  padding: 22px 0;

  .aside-affair {
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 14px 22px;
    background-color: var(--el-menu-bg-color);
    display: flex;

    .aside-affair-icon {
      height: 38px;
      width: 38px;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--el-color-warning);
    }

    .aside-affair-content {
      padding-left: 1px;
    }
  }

  .aside-affair-add {
    border-radius: 12px;
    padding: 14px 22px;
    background-color: var(--el-menu-bg-color);
    display: flex;
    align-items: center;
    cursor: pointer;

    .aside-affair-icon {
      height: 38px;
      width: 38px;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--el-color-warning);
    }
  }
}

@keyframes hover-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

.main-right-item1 {
  /* 已有的样式 */
  padding: 4vh 0;
  border-radius: 12px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 30px;

  /* 鼠标悬停时的浮动效果 */
  transition: all 0.3s ease-in-out;
  animation: none;

/* 当鼠标悬停时应用浮动动画 */
&:hover {
   animation: hover-float 0.5s infinite alternate;
 }
}

.check-all:hover {
  transform: scale(1.5);
}
</style>
